<template>
  <div class='container'>
    <div class='app-container'>
      <goods-shelves :ref="'childComponentRef' + index"
                     v-for='(item,index) in goodsShelves'
                     :key='item.id'
                     :index='index'
                     :item='item'
                     @openPromptDialog='openPromptDialog'
                     @openBindItems='openBindItems'
                     @openUnBinding='openUnBinding' />
    </div>
    <!--  空状态  -->
    <el-empty v-if='goodsShelves.length === 0'
              :image-size='400'
              description='请先添加货架'></el-empty>
    <!--  物料绑定组件  -->
    <material-binding :show-dialog.sync='showDialog' @bindComplete='bindComplete' :ws-data='wsData'
                      :current-location-data='currentLocationData'></material-binding>
    <!--  物料解绑组件  -->
    <material-un-binding :show-dialog.sync='showUnBindDialog' @unBindingComplete='bindComplete'
                         :current-un-binding-data='currentUnBindingData'></material-un-binding>
    <!-- 合并/拆分提示组件 -->
    <prompt-dialog @completionOperation='completionOperation' :show-prompt-dialog.sync='showPromptDialog'
                   :title='promptTitle' :type='promptType' :prompt-ids='promptIds' :prompt-msg='promptMsg' />
  </div>
</template>

<script>
import GoodsShelves from './components/goodsShelves.vue'
import PromptDialog from './components/promptDialog.vue'
import MaterialBinding from '@/views/pageAdmin/locatorManage/components/materialBinding.vue'
import { queryList } from '@/api/shelfManage'
import MaterialUnBinding from '@/views/pageAdmin/locatorManage/components/materialUnBinding.vue'

export default {
  name: 'index',
  components: {
    MaterialUnBinding,
    MaterialBinding,
    GoodsShelves,
    PromptDialog
  },
  data() {
    return {
      // 货架数据
      goodsShelves: [],
      // 控制绑定物料弹窗
      showDialog: false,
      // 控制合并/拆分提示弹窗
      showPromptDialog: false,
      // 控制合并/拆分提示弹窗 标题
      promptTitle: '合并提示',
      // 控制合并/拆分提示弹窗 索引
      promptDialogIndex: 0,
      // 控制合并/拆分提示弹窗 类型 1合并 2拆分
      promptType: 1,
      // 控制合并/拆分提示弹窗 提示信息
      promptMsg: '',
      // 控制合并/拆分提示数据id
      promptIds: [],
      // 当前要绑定物流的库位数据
      currentLocationData: {},
      // websocket数据
      wsData: {},
      // 当前要解绑的数据
      currentUnBindingData: {},
      // 控制解绑物料弹窗
      showUnBindDialog: false
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 接收websocket消息
    operateMessage(wsData) {
      if (JSON.parse(wsData.data).type !== 'single_weight') return
      this.wsData = JSON.parse(wsData.data)
    },
    getList() {
      const loading = this.$loading({
        lock: true,
        text: '拼命加载中...',
        background: 'rgba(0, 0, 0, 0.6)'
      })
      queryList().then(res => {
        this.goodsShelves = res.result
        loading.close()
      }).catch(err => {
        loading.close()
      })
    },
    // 打开绑定物料弹窗
    openBindItems(data) {
      this.showDialog = true
      this.currentLocationData = { ...data }
    },
    // 打开解绑物料弹窗
    openUnBinding(data) {
      this.showUnBindDialog = true
      this.currentUnBindingData = { ...data }
    },
    // 打开合并/拆分提示弹窗
    openPromptDialog(data) {
      this.showPromptDialog = true
      this.promptTitle = data.title
      this.promptType = data.type
      this.promptDialogIndex = data.index
      this.promptMsg = data.mergeStr
      this.promptIds = []
      if (data.type === 1) {
        // 合并
        data.data.forEach(item => {
          this.promptIds.push(item.id)
        })
      } else {
        // 拆分
        data.data.forEach(item => {
          this.promptIds.push(item.mergeId)
        })
      }
    },
    // 完成操作
    completionOperation() {
      this.getList()

      // 调用goods-shelves组件中的方法
      this.$refs['childComponentRef' + this.promptDialogIndex][0].finishMerge2()
      this.$refs['childComponentRef' + this.promptDialogIndex][0].updateShelves()
    },
    // 绑定/解绑物料完成
    bindComplete() {
      this.getList()
    }
  },
  created() {
  },
  mounted() {
    this.getList()
    this.$eventBus.$on('socketMsg', this.operateMessage)
  },
  beforeDestroy() {
    this.$eventBus.$off('socketMsg', this.operateMessage)
  }
}
</script>
<style scoped lang='scss'>
@import '@/styles/_handle.scss';

.app-container {
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>
